<template>
  <div>
    <div class="fujianclass">
        <span>共{{ias.length}}个附件</span>
      <btn-upload uploadApi="/v1/upload/" uploadName="添加附件" @uploadSuccess="onSuccess"></btn-upload>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;border-bottom: 1px solid #EEEEEE;"
         @mouseover="mouseover(item)" @mouseleave="mouseleave(item)" v-for="(item, index) in ias" :key="index">
      <div style="display: flex;flex-direction: column; align-items: start;padding: 10px 20px">
        <div style="display: flex;flex-direction: row; color: #dcdcdc">
          <i class="iconfont el-icon-folder-add" style="font-size: 60px"></i>
          <div style="display: flex; flex-direction: column; justify-content: center;margin-left: 10px;" :title="item.name">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div v-if="item.itShow">
<!--        <el-button type="text" style="font-size: 18px" title="下载"><i class="iconfont el-icon-download"></i></el-button>-->
        <a :href="item.url" target="_blank"><i class="iconfont el-icon-download"></i></a>
      </div>
    </div>
  </div>
</template>

<script>
import btnUpload from "@/components/element/btnUpload";
import projectTaskApi from "@/api/projectTaskApi";


export default {
  name: "workingHours",
  components: {
    btnUpload
  },
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
  },
  data () {
    return {
      ias: []
    }
  },
  methods: {
    setIas () {
      this.ias = []
      let a = (this.formData.Attachment || '').split('，')
      a.forEach(it => {
        this.ias.push({
          name: this.shouFileName(it),
          url: it,
          itShow: false
        })
      })
    },
    //
    shouFileName (item) {
      let a = item.split('/')
      if (a.length > 0) {
        return a[a.length - 1]
      } else {
        return ''
      }
    },
    // 上传成功
    onSuccess (response, file, fileList) {
      this.ias.push({
        url: response.fileID,
        name: this.shouFileName(response.fileID),
        itShow: false
      })
      this.formData.Attachment = this.ias.map(it => it.url).join('，')
      this.saveBtn()
      this.$emit('update:formData', this.formData)
    },
    // 保存
    saveBtn () {
      projectTaskApi.update(this.formData).then(res => {
        if (res) {
          if (res.code === 1) {
            this.$message({ type: 'success', message: '文件上传成功' })
          } else {
            this.$message({ type: 'warning', message: '文件上传成功' })
          }
        }
      })
    },
    mouseover (item) {
      this.$set(item, 'itShow', true)
    },
    mouseleave (item) {
      this.$set(item, 'itShow', false)
    }
  }
}
</script>

<style scoped>
.fujianclass {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #EEEEEE;
}
.upload-demo >>> .el-upload--text {
  border: none;
}
</style>